doctype html
html
  head
    meta(charset="UTF-8")
    meta(name="apple-mobile-web-app-capable" content="yes")
    meta(name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no")
    link(rel="stylesheet" href="../lib/css/common.css")/
    link(href="../lib/css/video-js.min.css" rel="stylesheet")/
    script(src="../lib/js/jquery-3.3.1.min.js")
    script(src="../lib/js/video.min.js")
    title #{title}
  body
    video#myVideo
    audio#myAudio(loop)
      source(src="../lib/source/bg.ogg")
    svg#mainSvg(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="1080" viewBox="0 0 1920 1080")
      defs
        pattern#soundOn(patternUnits="userSpaceOnUse" width="100" height="100")
          image(xlink:href="../lib/images/sound.png" x="0" y="0" width="104" height="105")/
        pattern#soundOff(patternUnits="userSpaceOnUse" width="100" height="100")
          image(xlink:href="../lib/images/sound-off.png" x="0" y="0" width="104" height="105")/
        pattern#wordOn(patternUnits="userSpaceOnUse" width="100" height="100")
          image(xlink:href="../lib/images/word.png" x="0" y="0" width="104" height="105")/
        pattern#wordOff(patternUnits="userSpaceOnUse" width="100" height="100")
          image(xlink:href="../lib/images/word-off.png" x="0" y="0" width="104" height="105")/
      g#gWord(title="字幕")
      g#gHelp.g-help(title="帮助" transform="translate(410,211)")
        image(xlink:href="../lib/images/help-text.png" x="0" y="0" width="1100" height="658")/
        image(xlink:href="../lib/images/xiaofeifei.png" x="45" y="-46" width="146" height="156")/
        image#btnCloseHelp.img-btn(xlink:href="../lib/images/x.png" x="1027" y="23" width="37" height="36" )/
      g(title="标题" transform="translate(0,0)")
        rect.r-control(x="0" y="0" width="1920" height="80")/
        image(xlink:href="../lib/images/logo.png" x="51" y="18" width="144" height="44")/
        text#txtTitle.txt-title(x="960" dominant-baseline="middle" text-anchor="middle" y="45")
      g(title="控制台" transform="translate(0,958)")
        rect.r-control(x="0" y="0" width="1920" height="122")/
        g#btnP.btn-play.pause(transform="translate(37,6)")
          g.play-item
            image#btnPlay.img-btn(title="播放" xlink:href="../lib/images/play.png" x="0" y="0" width="104" height="107")/
            text.ctrl-btn-txt(x="28" y="106") play
          g.pause-item
            image#btnPause.img-btn(title="停止" xlink:href="../lib/images/pause.png" x="0" y="0" width="104" height="107" )/
            text.ctrl-btn-txt(x="20" y="106") pause
      g(title="进度条" transform="translate(171,44)")
        rect(x="0" y="0" fill="#ffffff" width="710" height="5")/
        rect#progressBar(x="0" y="0" fill="#fff333" width="0" height="5")/
        rect#btnProgressBar.img-btn(x="0" y="-8" fill="#ffffff" width="10" height="23")/
      g(transform="translate(900,54)")
        text#txtCurrentTime.txt(x="0" y="0") 00:00
        text.txt(x="65" y="0") |
        text#txtTotalTime.txt(x="85" y="0") 00:00
      g(transform="translate(1084,8)")
        g#btnPlayRate1.btn-play_rate(transform="translate(0,0)" data-val="0.8" title="0.8倍播放")
          image.img-btn.btn-play_rate_img-on(xlink:href="../lib/images/Bitmap3.png" x="0" y="0" width="109" height="109")/
          image.img-btn.btn-play_rate_img-off(xlink:href="../lib/images/Bitmap3-off.png" x="0" y="0" width="109" height="109")/
          text.ctrl-btn-txt(x="35" y="106") 0.8×

        g#btnPlayRate2.btn-play_rate.active(transform="translate(109,0)" title="1.0倍播放" data-val="1.0")
          image.img-btn.btn-play_rate_img-on(xlink:href="../lib/images/Bitmap1.png" x="0" y="0" width="109" height="109")/
          image.img-btn.btn-play_rate_img-off(xlink:href="../lib/images/Bitmap1-off.png" x="0" y="0" width="109" height="109")/
          text.ctrl-btn-txt(x="35" y="106") 1.0×

        g#btnPlayRate3.btn-play_rate(transform="translate(218,0)" title="1.2倍播放" data-val="1.2")
          image.img-btn.btn-play_rate_img-on(xlink:href="../lib/images/Bitmap2.png" x="0" y="0" width="109" height="109")/
          image.img-btn.btn-play_rate_img-off(xlink:href="../lib/images/Bitmap2-off.png" x="0" y="0" width="109" height="109")/
          text.ctrl-btn-txt(x="35" y="106") 1.2×

      g(transform="translate(1592,6)")
        g(transform="translate(0,0)")
          rect#btnSound.btn-sound.img-btn(title="音量" x="0" y="0" width="104" height="105")/
          text.ctrl-btn-txt(x="23" y="104") sound

        g(transform="translate(97,0)")
          rect#btnWord.btn-word.img-btn(title="文字" x="0" y="0" width="104" height="105")/
          text.ctrl-btn-txt(x="13" y="104") substitle

        g(transform="translate(190,0)")
          image#btnHelp.img-btn(title="帮助" xlink:href="../lib/images/help.png" x="0" y="0" width="104" height="105")/
          text.ctrl-btn-txt(x="35" y="104") help

    div#loading.loading.active
    script(src="./js/config.js")
    script(src="../lib/js/index.js")
